<template>
	<view class="loader"></view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	 

	view {
		/* 100%窗口高度 */
		height: 100vh;
		/* 弹性布局 居中显示 */
		display: flex;
		justify-content: center;
		align-items: center;
		/* 渐变背景 */
		background: linear-gradient(to top, #1e3c72, #2a5298);
	}

	.loader {
		width: 125px;
		/* 相对定位 */
		position: relative;
		/* 设置视距 */
		perspective: 200px;
	}

	.loader::before,
	.loader::after {
		content: "";
		width: 50px;
		height: 50px;
		/* 默认透明背景色 */
		background-color: transparent;
		/* 绝对定位 */
		position: absolute;
		/* 执行动画：动画名 时长 慢速开始慢速结束中间加快 无限次播放 来回轮流 */
		animation: jumping 0.5s ease infinite alternate;
	}

	.loader::before {
		left: 0;
	}

	.loader::after {
		right: 0;
		/* 这一个设置动画延迟 */
		animation-delay: 0.15s;
	}

	/* 定义动画 */
	@keyframes jumping {
		0% {
			transform: scale(1) translateY(0) rotateX(0);
			box-shadow: 0 0 0 transparent;
		}

		100% {
			background-color: #fff;
			transform: scale(1.2) translateY(-55px) rotateX(45deg);
			box-shadow: 0 55px 100px #fff;
		}
	}
</style>